﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id="Description">This demo shows how to display a bullet chart with five ranges.
        Additionaly, it showcases the tooltipFormatFunction callback function.</title>
    <meta name="keywords" content="bullet chart, bullet graph, BulletChart, chart, jQuery bullet graph, jQuery bullet chart, jQWidgets, jqxBulletChart, ranges, tooltip" />
    <meta name="description" content="This demo shows how to display a bullet chart with five ranges. Additionaly, it showcases the tooltipFormatFunction callback function." />
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbulletchart.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var pointsToGrade = function (points) {
                var grade;
                if (points < 60) {
                    grade = "E";
                } else if (points < 70) {
                    grade = "D";
                } else if (points < 80) {
                    grade = "C";
                } else if (points < 90) {
                    grade = "B";
                } else {
                    grade = "A";
                }
                return grade;
            };

            $("#jqxBulletChart").jqxBulletChart({
                width: 700,
                height: 100,
                barSize: "50%",
                title: "Student grade",
                description: "(in points)",
                ranges: [
                    { startValue: 0, endValue: 60, color: "#191970" },
                    { startValue: 60, endValue: 70, color: "#191970" },
                    { startValue: 70, endValue: 80, color: "#191970" },
                    { startValue: 80, endValue: 90, color: "#191970" },
                    { startValue: 90, endValue: 100, color: "#191970" }
                ],
                pointer: { value: 83, label: "Grade", size: "25%", color: "#1E90FF" },
                target: { value: 75, label: "Average grade", size: 4, color: "#00FFFF" },
                ticks: { position: "far", interval: 10, size: 10 },
                showTooltip: true,
                tooltipFormatFunction: function (value, target) {
                    var currentGrade = pointsToGrade(value);
                    var averageGrade = pointsToGrade(target);
                    return "<div>Grade: <strong>" + currentGrade + "</strong> (" + value + " points)</div><div>Average grade: <strong>" + averageGrade + "</strong> (" + target + " points)</div>";
                }
            });
        });
    </script>
</head>
<body>
    <label style="font-size: 13px; font-family: Verdana;">
        Hover over the pointer or target for more information.</label>
    <div id="jqxBulletChart">
    </div>
</body>
</html>
